<template>
  <div class="product container">
    <el-form :model="form" :rules="rules" label-position="left" ref="form" label-width="150px">
      <div class="title">产品其他设置</div>
      <el-form-item label="系统名称" prop="systemName">
        <el-input v-model="form.systemName" maxlength="20"></el-input>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input v-model="form.version" disabled maxlength="255"></el-input>
      </el-form-item>
      <el-form-item label="制造厂商" prop="maker">
        <el-input v-model="form.maker" maxlength="255"></el-input>
      </el-form-item>
      <el-form-item label="LOGO" prop="file">
        <el-upload
          ref="upload"
          drag
          :limit="1"
          :headers="upload.headers"
          :action="upload.url"
          :disabled="upload.isUploading"
          :on-change="handleFileUploadProgress"
          :auto-upload="false"
        >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">
            将文件拖到此处，或
            <em>点击上传</em>
          </div>
          <!-- <div><span>支持扩展名：.zip</span></div> -->
        </el-upload>
        <div class="tip">
          <span>
            支持扩展名：.zip，压缩包内存3张图片，登录页logo：616*108px,浅色背景logo,深色背景logo,尺寸均为：80*80px,登录页图片名称：login.png,浅色系统图标：white.png,深色系统图标：blue.png。
          </span>
        </div>
      </el-form-item>
      <el-form-item label="版权声明" prop="copyRight">
        <el-input v-model="form.copyRight" maxlength="255"></el-input>
      </el-form-item>
    </el-form>
    <div class="footer">
      <el-button type="primary" @click="submitForm">保 存</el-button>
    </div>
  </div>
</template>

<script>
import { productConfig, update } from '@/api/system/product'
import { getToken, TokenKey } from '@/utils/auth'
import axios from 'axios'
export default {
  data() {
    return {
      form: {
        systemName: '',
        version: '',
        // logo:'fsdf',
        /*   picInforamation: [
        {
          title: '登录首页图标',
          systemPics: [
            {
              url: 'blob:http://localhost/60ec486e-bb36-4119-87f7-aad30e52d5cc',
            },
          ],
          uploadPics: [
            {
              url: 'blob:http://localhost/a817bfe5-c766-45fb-9f55-832a042085d6',
              maskVisual: false,
            },
          ],
          selectedUrl: 'blob:http://localhost/60ec486e-bb36-4119-87f7-aad30e52d5cc',
          maskVisual: false,
        },
        {
          title: '系统图标（科技蓝色背景）',
          systemPics: [],
          uploadPics: [],
          selectedUrl: '',
          maskVisual:''
        },
        {
          title: '系统图标（浅色背景）',
          systemPics: [],
          uploadPics: [],
          selectedUrl: '',
          maskVisual:''
        },
      ], */
        maker: '',
        copyright: ''
      },
      rules: {
        systemName: [{ required: true, message: '请输入系统名称', trigger: 'blur' }],
        maker: [{ required: true, message: '请输入系统名称制造厂商', trigger: 'blur' }],
        logo: [{ required: true, message: '请选择LOGO', trigger: 'blur' }],
        copyRight: [{ required: true, message: '请输入版权声明', trigger: 'blur' }]
      },
      fileList: [],
      // 用户导入参数
      upload: {
        // 是否显示弹出层
        open: false,
        // 弹出层标题
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: true,
        // 设置上传的请求头部
        headers: { [TokenKey]: getToken() },
        // 上传的地址
        url: window.baseUrl + '/system/productConfig/update'
      },
      fileList: []
    }
  },
  mounted() {
    this.getDataObj()
  },
  methods: {
    getDataObj() {
      productConfig().then(res => {
        this.form = res
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(file, fileList) {
  
      if (file.name.slice(-4) !== '.zip') {
        this.$message.warning('文件类型必须为zip')
        this.$refs.upload.clearFiles()
        return
      }
      this.fileList = fileList.map(item => {
        return { file: item.raw }
      })
    },

    // 保存表单
    submitForm() {
      const formFile = new FormData()
      this.fileList.forEach((item, key) => {
        formFile.append('file', item.file)
      })
      for (let key in this.form) {
        formFile.append(key, this.form[key])
      }
      this.$refs['form'].validate(valid => {
        if (valid) {
          axios({
            method: 'post',
            url: window.baseUrl + '/system/productConfig/update',
            headers: {
              'Content-Type': 'multipart/form-data',
              [TokenKey]: getToken() 
            },
            transformRequest: [
              function() {
                return formFile
              }
            ],
            params: formFile
          }).then(res => {
            console.log(res);
            if(res.data.code!==200){this.$message.warning(res.data.msg)}
            else this.$message.success('保存成功')
            this.$refs.upload.clearFiles()
          })
        } else {
          this.$message.warning('有必填项未填')
          return false
        }
      })
    },
    submitFileForm() {
      const form = new FormData()
      this.fileList.forEach((item, key) => {
        form.append('file', item.file)
      })

      axios({
        method: 'get',
        url: window.baseUrl + '/assetsStorageMedium/export',
        headers: {
          'Content-Type': 'multipart/form-data'
        },
        transformRequest: [
          function() {
            return form
          }
        ],
        params: form
      })
        .then(res => {
          if (res.data.code == 200) {
            this.$message.success('导入成功')
            this.upload.open = false
            this.$emit('submit')
          } else {
            this.$message.warning('文件错误')
          }
        })
        .catch(err => {
          this.$message.warning('文件上传失败')
          this.$refs.upload.clearFiles()
        })
    }
  }
}
</script>

<style lang="scss" scoped>
.tip {
  color: #4b6eef;
  font-size: 14px;
}
.product {
  width: 100%;
  height: 100%;
  position: relative;
  background: #eef0f5;
  .el-form {
    background: #fff;
    padding: 20px 20px 20px 40px;
  }
  .title {
    font-weight: 600;
    font-size: 16px;
    margin-bottom: 20px;
    margin-left: -20px;
  }
  .logo-title {
    font-size: 14px;
    font-weight: 500;
    position: relative;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: inline-block;
      // transform: translateY(-50%);
      width: 3px;
      height: 14px;
      background: #4b6eef;
      margin-right: 10px;
    }
  }
  .logo-item {
    // &+div{
    //   margin-top: 20px;
    // }
  }
  .pics {
    display: flex;
    align-items: center;
    .imgs {
      width: 90px;
      height: 90px;
      margin-right: 20px;
      position: relative;
      border-radius: 4px;
      overflow: hidden;
      // 选中项
      &.selected {
        &::before {
          content: '';
          position: absolute;
          z-index: 100;
          width: 24px;
          height: 24px;
          top: 0;
          right: 0;
          background: url(../../../assets/images/selected.png) no-repeat center;
          background-size: 100% 100%;
        }
      }
      &::after {
        display: flex;
      }
      img {
        width: 100%;
        height: 100%;
      }
      // 上传的图片遮罩层
      .uploadimg {
        position: absolute;
        z-index: 100;
        width: 100%;
        height: 100%;
        background: rgba($color: #000000, $alpha: 0.6);
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }
  }
}
.footer {
  position: absolute;
  width: 100%;
  bottom: 0;
  right: 0px;
  padding: 20px;
  text-align: right;
}

.el-form-item + .el-form-item {
  margin-top: 20px;
}
::v-deep {
  .el-upload--picture-card {
    width: 90px;
    height: 90px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .el-icon-delete {
    font-size: 20px;
    color: #fff;
  }
  .el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:before,
  .el-form-item.is-required:not(.is-no-asterisk) .el-form-item__label-wrap > .el-form-item__label:before {
    margin-left: -10px;
    margin-right: 4px;
  }
}
</style>
